import { dayjs } from 'element-plus';
import {
  DATE_CUTS,
  FORMAT_DATE,
  SELECT_MULTIPLE_ATTRS,
  CASCADER_MULTIPLE_ATTRS,
  INIT_SEARCH_TIME,
  GET_USER_IDS
} from '@/utils/const';
import userStore from '@/store/modules/user';

// 注入组件内数据
const componentData = ref({});
export const injectData = obj => {
  componentData.value = { ...componentData.value, ...obj };
};

// 查询表单
export const searchParams = reactive({
  business_group_id_map: [],
  site_type: 0,
  domain_usage_map: [],
  applyRange: DATE_CUTS.PREV_MONTH()
});

watch(
  () => searchParams.applyRange,
  val => {
    INIT_SEARCH_TIME(searchParams, val, 'begin_at', 'end_at');
  },
  { immediate: true }
);
watch(
  () => searchParams.domain_usage_map,
  val => {
    if (!val?.length || val?.includes?.('-1')) searchParams.domain_usage = [];
    else searchParams.domain_usage = val;
  },
  { immediate: true }
);
watch(
  () => searchParams.business_group_id_map,
  val => {
    if (!val?.length || val?.includes?.('')) {
      searchParams.business_group_id = [];
    } else searchParams.business_group_id = val;
  },
  { immediate: true }
);

// 查询条件
const startApplyTime = ref(undefined);
export const formItems = reactive({
  applyRange: {
    component: 'date-picker',
    type: 'daterange',
    label: '使用时间',
    clearable: false,
    shortcuts: [
      { text: '最近7天', value: () => DATE_CUTS.LAST_7_DAYS() },
      { text: '本周', value: () => DATE_CUTS.THIS_WEEK() },
      { text: '本月', value: () => DATE_CUTS.THIS_MONTH() },
      { text: '上周', value: () => DATE_CUTS.PREV_WEEK() },
      { text: '上月', value: () => DATE_CUTS.PREV_MONTH() },
      { text: '最近31天', value: () => DATE_CUTS.LAST_31_DAYS() },
      { text: '最近180天', value: () => DATE_CUTS.LAST_180_DAYS() }
    ],
    disabledDate(ev) {
      if (!startApplyTime.value) return false;
      return (
        dayjs(ev).isAfter(dayjs(startApplyTime.value).add(179, 'day')) ||
        dayjs(ev).isBefore(dayjs(startApplyTime.value).subtract(179, 'day'))
      );
    },
    calendarChange(ev) {
      if (ev?.length && ev[0] && !ev[1]) startApplyTime.value = ev[0];
      else startApplyTime.value = undefined;
    }
  },
  domain: {
    component: 'input',
    label: '域名',
    placeholder: '请输入域名',
    maxlength: 100
  },
  user_name: {
    component: 'input',
    label: '使用人员',
    placeholder: '请输入使用人员',
    maxlength: 100,
    input() {
      searchParams.user_ids = GET_USER_IDS(searchParams.user_name);
    }
  },
  business_group_id_map: {
    component: 'select',
    filterable: true,
    label: '业务组',
    clearable: false,
    ...SELECT_MULTIPLE_ATTRS(searchParams, 'business_group_id_map', ''),
    options: []
  },
  domain_usage_map: {
    component: 'cascader',
    label: '域名用途',
    clearable: false,
    ...CASCADER_MULTIPLE_ATTRS(searchParams, 'domain_usage_map', '-1'),
    options: []
  },
  site_type: {
    component: 'select',
    filterable: true,
    label: '站点类型',
    clearable: false,
    options: []
  }
});

// 表格字段
export const columns = ref([
  { prop: 'domain', label: '域名', fixed: 'left' },
  {
    prop: 'company_id',
    label: '所属公司',
    format(data) {
      return userStore().companyMap[data]?.label;
    }
  },
  {
    prop: 'group',
    label: '所属团队',
    format(data) {
      return data?.name;
    }
  },
  {
    prop: 'user_id',
    label: '使用人员',
    format(data) {
      return userStore().userMap[data]?.label;
    }
  },
  {
    prop: 'begin_at',
    label: '使用开始时间',
    minWidth: 170,
    format(data) {
      return FORMAT_DATE(data, 'YYYY-MM-DD HH:mm:ss');
    }
  },
  {
    prop: 'end_at',
    label: '使用结束时间',
    minWidth: 170,
    format(data) {
      return FORMAT_DATE(data, 'YYYY-MM-DD HH:mm:ss');
    }
  },
  {
    prop: 'business_group',
    label: '业务组',
    format(data) {
      return data?.name;
    }
  },
  {
    prop: 'domain_usage',
    label: '域名用途',
    format(data) {
      const names = data?.map?.(item => item.name) || [];
      return names.join('、');
    }
  },
  {
    prop: 'site_type',
    label: '站点类型',
    format(data) {
      return data?.name;
    }
  },
  {
    prop: 'updater_id',
    label: '更新人',
    format(data) {
      return userStore().userMap[data]?.label;
    }
  },
  {
    prop: 'updated_at',
    label: '更新时间',
    minWidth: 170,
    format(data) {
      return FORMAT_DATE(data, 'YYYY-MM-DD HH:mm:ss');
    }
  }
]);
